<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>修德抄经堂</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/full.css">
	<link rel="stylesheet" type="text/css" href="../css/read.css">
</head>
<body>
<div id="mcover" style="display:none;">
	<img src="../img/guide.png" />
</div>
<div class="page">
	<!--<header class="mui-bar mui-bar-nav title">-->
	<!--&lt;!&ndash;<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><span>返回</span></a>&ndash;&gt;-->
	<!--<h1 class="mui-title">道德抄经堂</h1>-->
	<!--</header>-->
	<div class="content">
		<img src="http://bk-bbe.com/static/sutras/edition/33/page/1.png" id="tu">
		<div class="words_backgroud">
			<div class="yincang zuo" id='left_page'>
				<img src="../img/benxin/next.png">
			</div>
			<div class="tapdiv">
				<!-- <img src="" class="cover" id="read-img"> -->
			</div>
			<div class='yincang you' id="right_page">
				<img src="../img/benxin/you.png">
			</div>
			<ul class="yincang btns">
				<a href="javascript:;" class="btn" id="write">
					<li class="btn">
						<img src="../img/benxin/write.png">
						<p>抄写</p>
					</li>
				</a>
				<li class="btn" id="cancleCollection" style="z-index: 10000;">

				</li>
				<li class="btn" id="fenxiang">
					<img src="../img/benxin/fenxiang.png">
					<p>分享</p>
				</li>
				<li class="btn" id="exit" style="display: block;">
					<img src="../img/benxin/exit.png">
					<p>退出</p>
				</li>

			</ul>
		</div>

	</div>
	<!--<div class="footer">-->
		<!--<div id="read_detail" class="mui-progressbar cover">-->
			<!--<span></span>-->
		<!--</div>-->
	<!--</div>-->
</div>
</body>
<script src="../bower_components/mui/dist/js/mui.min.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../js/read.js"></script>
<script src="../js/common.js"></script>
<script>
    var fenxiang = $('#fenxiang');
    fenxiang.click(function () {
        $("#mcover").css("display","block");
    })
    $("#mcover").click(
        function(){
            $("#mcover").css("display","none");  // 点击弹出层，弹出层消失
        }
    )
    $("#exit").click(function () {
        window.history.back();
    })
</script>
<script>
    var pageId = getUrlParam('id');
    var pnum = 1;
    var end = false;
    var collectList = new Array();
    var csrftoken = getCookie('csrftoken');

    function getCollectList(){
        $.ajax({
            url: '/fe/user/starred/sutra_edition?limit=200&offset=0',
            async: false,
            success: function (data) {
                data = data.data;
                for (var i = data.length - 1; i >= 0; i--) {
                    collectList.push(data[i].id.toString())
                }
            },
            error: function (error) {
                console.log(error)
            }
        })
    }
    var noCollectStr = '<img src="../img/benxin/read.png"><p>取消收藏</p>';
    var collectStr = '<img src="../img/benxin/collection.png"><p>收藏</p>';

    function toNoCollect(){
        $('#cancleCollection').attr("data-collect", "1");
        $('#cancleCollection').html(noCollectStr);
    }
    function toCollect(){
        $('#cancleCollection').attr("data-collect", "0");
        $('#cancleCollection').html(collectStr);
    }
    getCollectList();
    if (collectList.indexOf(pageId) > -1) {
        toNoCollect();

    }else {
        toCollect();
    }
    function getImg(pid, pnum) {
        $.ajax({
            url: '/fe/sutra/edition/'+pid+'/content',
            data: {
                "page_num": pnum,
            },
            success: function (data) {
                data = data.data;
                original_cimg_url = data.original_cimg_url;
                if (original_cimg_url) {
                    //img_url = 'url(' + original_cimg_url + ')';
                    //$('.words_backgroud').css("background-image", img_url);
					$('#tu').attr('src',original_cimg_url);
                }else {
                    end = true;
                }

            },
            error: function (error) {
                console.log(error)
            }
        })
    }

    var tapNum = 0;
    window.onload = function () {
        getImg(pageId,pnum);
        console.log(pageId,pnum);
    };
    getImg(pageId, pnum);
    $('.tapdiv').on('tap', function(i){
        tapNum++
        if (tapNum % 2) {
            $('.yincang').show();
        }else {
            $('.yincang').hide();
        }

    })

    $('#left_page').on('tap', function(i){
        if (pnum > 0){
            pnum--;
        }

        end=false;
        $('.you').show();
        if (pnum <= 0) {
            $('.zuo').hide();
        }else {
            getImg(pageId, pnum);
            console.log(pageId,pnum);
        }
    })
    $('#right_page').on('tap', function(i){
        if (!end) {
            pnum++;
        }
        $('.zuo').show();
        if (!end) {
            getImg(pageId, pnum);
        }else{
            pnum--;
            $('.you').hide();
        }

    })


    $('#write').click(function () {
        location.href = 'caoxuexuanze.html?id='+pageId+'';
        localStorage.setItem('versionId',pageId);
    });

    $('#cancleCollection').on('tap', function(i){
        if($(this).data('collect') == 1){
            api = '/fe/user/starred/sutra_edition/' + pageId;
            $.ajax({
                url: api,
                type: 'DELETE',
                beforeSend: function(xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                success: function (data) {
                    toCollect();
                }
            })
            $('#cancleCollection').data('collect','0');
        }else {
            api = '/fe/user/starred/sutra_edition/' + pageId;
            $.ajax({
                url: api,
                type: 'PUT',
                beforeSend: function(xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                success: function (data) {
                    toNoCollect();
                }
            })
            $('#cancleCollection').data('collect','1');
        }
    })

</script>
</html>